<template>
  <div class="echarts-inner"/>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  import { debounce } from '@/utils'
  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      echartsData: {
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.echartsData)
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('pageNav')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null

    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(echartsData = {}) {
        const th = this
        if(echartsData.unitName){
          echartsData.unitName[0] = echartsData.unitName[0] || ''
          echartsData.unitName[1] = echartsData.unitName[1] || ''
        }else{
          echartsData.unitName = ['','']
        }
        echartsData.pieLength = echartsData.pieLength || echartsData.dataset.length - 1
        th.chart = echarts.init(th.$el, 'wg')
        let A = []
        echartsData.yAxis && echartsData.yAxis.forEach((item, index) => {
          A.push({
            type: 'value',
            name: item.name,
            min: item.min || null,
            max: item.max || null,
            position: (index === 0 ? 'left' : 'right'),
            axisLabel: {
              formatter: item.formatter
            }
          })
        })
        echartsData.yAxis = A
        A = []
        echartsData.legend = []
        echartsData.series = []


        let hasFZ = null
        echartsData.dataset.forEach((item, index) => {
          if (item[0] === '辅助') {
            hasFZ = '总量'
          }
        })

        echartsData.dataset.forEach((item, index) => {
          if (index > 0) {
            if (item[0] !== '辅助') {
              echartsData.legend.push(item[0])
            }

            const isBar = index <= echartsData.pieLength

            let serItem = {
              type: isBar ? 'bar' : 'line',
              smooth: true,
              stack: echartsData.superposition,
              seriesLayoutBy: 'row',
              yAxisIndex: isBar ? 0 : 1,
            }
            console.log(item)
            if (item[0] === '辅助') {
              serItem.itemStyle = {
                normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
            echartsData.series.push(serItem)
          }
        })

        th.chart.setOption({
          grid: {
            top: 60,
            left: '3%',
            right: '3%',
            bottom: 0,
            containLabel: true
          },
          dataset: {
            source: echartsData.dataset
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: (e) => {
              let re = [e[0].name + '<br/>']
              e.forEach((item, i) => {
                if (item.data[i + 1] && item.seriesName !== '辅助') re.push(item.seriesName + ' : ' + item.value[i + 1]
                  + echartsData.unitName[i < echartsData.pieLength ? 0 : 1] + '<br/>')
              })
              return (re.join(''))
            }
          },
          legend: {
            data: echartsData.legend
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: echartsData.yAxis,
          series: echartsData.series
        })
      }


    }
  }
</script>
<style scoped>
  .echarts-inner {
    height: 100%;
  }

</style>
